<!--
 	* @author  dumeng
-->
<template>
  <section class="reset-union">
    <section class="main-close" @click="()=>{$router.back()}">
      <img src="./images/closeLogin.png" alt/>
    </section>
    <section class="page-title">
      <p class="title">选择要找回密码的工会</p>
      <p class="sub-title">您在多个工会有账号</p>
    </section>
    <ul class="page-container">
      <li v-for="item in unionList" :key="item.id" @click="handleClick(item)">
        <span>{{item.enterpriseName}}</span>
        <img class="more" :src="require('./images/more.png')" alt="">
      </li>
    </ul>
    <section class="unify-update">
      <section class="update-btn" @click="resetUnion('')">全部工会统一修改</section>
    </section>
  </section>
</template>

<script>
  import url from './api'
	import { mapGetters } from 'vuex'
	export default {
		name: "reset-union",
		computed: {
			...mapGetters([
				'unionList'
			])
		},
    methods: {
			handleClick(item) {
        this.resetUnion(item.id)
      },
			resetUnion(id) {
				this.$dialog.loading.open('请稍后...')
				const params = {
					uuid: this.$route.query.u,
					bIds: id || this.unionList.map(item => { return item.id }).join(','),
					reqTime: new Date().Format('yyyy-MM-dd hh:mm:ss')
				}
				const signStr = JSON.stringify(params)// 仅处理
				const data = {
					param: this.$getRsaCode(signStr)
				}
				this.$axios.post(url.resetUnion, data).then(res => {
					this.$dialog.loading.close()
					if (res.code === '200') {
						this.$dialog.toast({
							mes: '修改成功',
							timeout: 1500,
							icon: 'success',
							callback: () => {
								this.$router.replace({ path: '/login' })
							}
						})
					} else {
						this.$dialog.toast({
							mes: `${res.msg}` || '修改失败',
							timeout: 1500,
							icon: 'none'
						})
					}
				}).catch(() => {
					this.$dialog.loading.close()
					this.$dialog.toast({
						mes: '修改失败',
						timeout: 1500,
						icon: 'none'
					})
				})
      }
    }
	}
</script>

<style scoped lang="scss">
  .reset-union{
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #eff0f4 0%, #f2f3f6 100%);
    position: relative;
    .main-close {
      height: $headerHeight;
      img {
        width: rem(32);
        height: rem(32);
        margin: rem(28) 0 rem(28) rem(30);
      }
    }
    .page-title {
      .title {
        font-size: rem(44);
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-left: rem(69);
      }
      .sub-title {
        font-size: rem(26);
        font-weight: 400;
        margin-top: rem(14);
        color: rgba(165, 165, 165, 1);
        margin-left: rem(69);
      }
    }
    .page-container{
      position: absolute;
      top: rem(250);
      bottom: rem(130);
      left: 0;
      right: 0;
      padding: 0 rem(50);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: rem(118);
        background-color: #fff;
        border-radius: rem(120);
        padding: 0 rem(35);
        border: 1px solid #fff;
        margin-bottom: rem(40);
        font-size: rem(32);
        font-weight: bold;
        &.active{
          background: #fff1ef;
          border: 1px solid #eb523c;
        }
        .logo{
          width: rem(404);
          height: rem(56);
        }
        .more{
          width: rem(13);
          height: rem(22);
        }
        &>section {
          display: flex;
          align-items: center;

        }
      }
    }
    .unify-update{
      height: rem(120);
      width: 100%;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .update-btn{
        width: rem(610);
        height: rem(88);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $mainColor;
        border-radius: rem(88);
        font-size: rem(32);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        text-align: left;
        color: #ffffff;
      }
    }
  }
</style>